<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>金翔石化电磁阀远程控制</title>
    <link rel="icon" href="../static/img/icon.png">
    <link rel="stylesheet" href="../static/js/layui/css/layui.css">
    <link rel="stylesheet" href="../static/css/animate.min.css">
    <link rel="stylesheet" href="../static/css/style.css">
    <link rel="stylesheet" href="../static/css/index.css">


</head>

<body>
    <div class="app">
        <div class="header animate__animated animate__slideInDown">
            <div class="header-title"></div>
            <div class="header-menu">

            </div>
            <div class="header-tool">
                <img src="../static/img/username.png" alt="" onclick="showPasswordWindow()">
                <img src="../static/img/logout.png" alt="" onclick="logout()">
            </div>
        </div>
        <div class="contain">
            <div class="con-left">
                <div class="model-con">
                    <div id="model-con"></div>
                    <div class="map-window animate__animated animate__flipInX">
                        <div class="window-title"></div>
                        <div><img src="../static/img/close.png" class="close-map-window"></div>
                        <div class="window-table">
                        </div>
                    </div>
                </div>
            </div>
            <div class="con-right">
                <div class="right-realtime normal-module">
                    <div class="con-title">
                        实时监测
                        <span class="data-more">更多</span>
                    </div>

                    <div class="realtime-list">
                        <div class="realtime-item">
                            <div>油罐总数</div>
                            <div class="realtime-data">
                            </div>
                        </div>
                        <div class="realtime-item">
                            <div>阀门总数</div>
                            <div class="realtime-data">
                            </div>
                        </div>
                        <div class="realtime-item">
                            <div>阀门关闭数量</div>
                            <div class="realtime-data">
                            </div>
                        </div>
                        <div class="realtime-item">
                            <div>阀门打开数量</div>
                            <div class="realtime-data">
                            </div>
                        </div>
                        <div class="realtime-item">
                            <div>阀门远程数量</div>
                            <div class="realtime-data">
                            </div>
                        </div>
                        <div class="realtime-item">
                            <div>阀门本地数量</div>
                            <div class="realtime-data">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right-alarm normal-module">
                    <div class="con-title">
                        阀门日志
                        <span class="alarm-more">更多</span>
                    </div>
                    <div class="log-check">
                        <div data-type="1">阀门开关记录</div>
                        <div data-type="2">阀门本地丨远程记录</div>
                    </div>
                    <div class="alarm-list">
                    </div>
                </div>
                <div class="right-ratio normal-module">
                    <div class="con-title">
                        阀门状态最新变化
                    </div>
                    <div id="status-change">
                        <div style="width: 100%;height:100%;display: flex;align-items: center;justify-content: center;">
                            <img src="../static/img/nodata.png">
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <script type="x-shader/x-vertex" id="vertexShader">

        varying vec3 vWorldPosition;

        void main() {

            vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
            vWorldPosition = worldPosition.xyz;

            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

        }

    </script>

    <script type="x-shader/x-fragment" id="fragmentShader">

        uniform vec3 topColor;
        uniform vec3 bottomColor;
        uniform float offset;
        uniform float exponent;

        varying vec3 vWorldPosition;

        void main() {

            float h = normalize( vWorldPosition + offset ).y;
            gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( max( h , 0.0), exponent ), 0.0 ) ), 1.0 );

        }

    </script>
    <script type="text/javascript" src="../static/js/util/jquery.min.js"></script>
    <script type="text/javascript" src="../static/js/util/echarts.min.js"></script>
    <script type="text/javascript" src="../static/js/biz/app.js"></script>
    <script type="text/javascript" src="../static/js/biz/index.js"></script>
    <script type="text/javascript" src="../static/js/layui/layui.all.js"></script>


    <!-- 三维 -->
    <script src="../libs/build/three-r93.min.js"></script>
    <script src="../libs/js/Detector.js"></script>
    <script src="../libs/js/controls/OrbitControls.js"></script>
    <script src="../libs/js/controls/MapControls.js"></script>
    <script src="../libs/js/loaders/GLTFLoader.js"></script>
    <script src="../libs/js/loaders/DRACOLoader.js"></script>
    <script src="../libs/js/objects/Reflector.js"></script>
    <script src="../libs/js/objects/Refractor.js"></script>
    <script src="../libs/js/renderers/CSS2DRenderer.js"></script>
    <script src="../libs/js/libs/tween.js"></script>
    <script src="../libs/js/objects/Sky.js"></script>
    <script src="../libs/js/objects/Water2.js"></script>
    <!-- <script src="../libs/js/postprocessing/EffectComposer.js"></script>
    <script src="../libs/js/postprocessing/RenderPass.js"></script>
    <script src="../libs/js/postprocessing/UnrealBloomPass.js"></script>
    <script src="../libs/js/postprocessing/OutlinePass.js"></script> -->

    <script type="text/javascript" src="../static/js/biz/3d.js"></script>

</body>

</html>